<template>
  <scroll-view scroll-y class="videoScroll" refresher-enabled @refresherrefresh="handleRefresher" :refresher-triggered="isTriggered" @scrolltolower="handleToLower">
    <view class="videoItem" v-for="(item, index) in videoList" :key="index">
      <video
        class="common"
        v-if="videoId === item.data.vid"
        :src="item.data.urlInfo.url"
        @play="handlePlay(item)"
        :poster="item.data.coverUrl"
        :autoplay="videoId === item.data.vid"
        object-fit="cover"
      ></video>
      <!-- 性能优化：使用image图片代替video标签 -->
      <image v-else @click="handlePlay(item)" class="common" :src="item.data.coverUrl"></image>
      <view class="content">{{ item.data.title }}</view>
      <view class="footer">
        <image class="avatar" :src="item.data.creator.avatarUrl"></image>
        <text class="nickName">{{ item.data.creator.nickname }}</text>
        <view class="comments_praised">
          <text class="item">
            <text class="iconfont icon-buoumaotubiao15"></text>
            <text class="count">{{ item.data.praisedCount }}</text>
          </text>
          <text class="item">
            <text class="iconfont icon-pinglun1"></text>
            <text class="count">{{ item.data.commentCount }}</text>
          </text>
          <button class="item btn" open-type="share"><text class="iconfont icon-gengduo"></text></button>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  name: 'my-video',
  props: {
    videoList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      // 视频的ID
      videoId: '',
      // 是否开启下拉刷新标识
      isTriggered: false
    };
  },
  methods: {
    // 视频播放事件
    handlePlay(item) {
      // 记录当前视频ID
      const vid = item.data.vid;
      this.videoId = vid;

      // this.videoList.forEach(x => {
      //   const videoContext = uni.createVideoContext(x.data.vid);
      //   videoContext.pause();
      // });
      // const currentVideoContext = uni.createVideoContext(item.data.vid);
      // currentVideoContext.play();
    },
    // 下拉刷新事件
    handleRefresher() {
      this.$emit('handleRefresher');
      // 关闭下拉刷新
      this.isTriggered = false;
    },
    // 上拉加载事件
    handleToLower() {
      this.$emit('handleToLower');
    }
  }
};
</script>

<style lang="scss">
/* 视频列表 */
.videoScroll {
  margin-top: 10rpx;
  /* calc: 可以动态计算css的宽高， 运算符左右两侧必须加空格，否则计算会失效 */
  /* 视口单位： vh vw  1vh = 1%的视口高度  1vw = 1%的视口宽度*/
  height: calc(100vh - 152rpx);
  /*height: calc(100vh - 100rpx); 用来测试页面上拉触底*/
}
.videoItem {
  padding: 0 3%;
}
/*.videoItem video {*/
/*width: 100%;*/
/*height: 360rpx;*/
/*border-radius: 10rpx;*/
/*}*/

.videoItem .common {
  width: 100%;
  height: 360rpx;
  border-radius: 10rpx;
}

.videoItem .content {
  font-size: 26rpx;
  height: 80rpx;
  line-height: 80rpx;
  max-width: 500rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* footer */
.footer {
  border-top: 1rpx solid #eee;
  padding: 20rpx 0;
}
.footer .avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  vertical-align: middle;
}

.footer .nickName {
  font-size: 26rpx;
  vertical-align: middle;
  margin-left: 20rpx;
}

.footer .comments_praised {
  float: right;
}

.comments_praised .btn {
  display: inline;
  padding: 0;
  background-color: transparent;
  border-color: transparent;
}

.comments_praised .btn:after {
  border: none;
}

.comments_praised .item {
  margin-left: 50rpx;
  position: relative;
}

.comments_praised .item .count {
  position: absolute;
  top: -20rpx;
  font-size: 20rpx;
}
</style>
